<html>
<head>
 <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 <title>{$rule['title']}</title>
 <script src="../addons/junsion_netlottery/template/mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../addons/junsion_netlottery/template/mobile/js/swiper.min.js" type="text/javascript"></script>
<script src="../addons/junsion_netlottery/template/mobile/js/sweetalert.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../addons/junsion_netlottery/template/mobile/css/swiper.min.css">
<link rel="stylesheet" href="../addons/junsion_netlottery/template/mobile/css/sweetalert.css">
<link rel="stylesheet" href="../addons/junsion_netlottery/template/mobile/css/bootstrap.min.css">
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
body{
	margin: 0 !important;
	padding: 0 !important;
}

	.prize{
	{if !$player['mobile']}display: none;{/if}
	}
	
	.prize img{
		width: 100%;
		height: 100%;
	}
	
	#notips{
		text-align: center;
		color: white;
		font-weight: bold;
		font-size: 25px;
		position: absolute;
		width: 100%;
		top: 37%;
	}
	
	#noprize{
	{if $prize}display: none;{/if}
	}
	#prize{
	{if !$prize}display: none;{/if}
	}
	
	#register .bg{
		width: 100%;
		height: 100%;
	}
	#register input{
	  background-color: transparent;
	  border: 0;
	  width: 100%;
	  text-align: center;
	  padding: 7px 0;
	  color: white;
	  font-weight: bold;
	  font-size: 20px;
	}
	.img{
		width: 100%;height: 100%;
	}
	
	.img1{
		  position: absolute;
		  left: 0;
		  top: 0;
	}
</style>
</head>
<body>
{php $IMG = '../addons/junsion_netlottery/template/mobile/img/';}
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
        	<img class="img" src="{$IMG}1-14.jpg">
        	<img id="img24" style="opacity: 0;" class="img img1" src="{$IMG}1-24.png">
        </div>
        <div class="swiper-slide">
        	<img class="img" src="{$IMG}1-15.jpg">
        	<img id="img25" style="opacity: 0;" class="img img1" src="{$IMG}1-25.png">
        </div>
        <div class="swiper-slide">
        	<img class="img" src="{$IMG}1-16.jpg">
        	<img id="img26" class="img img1" src="{$IMG}1-26.png">
        	<img id="img27" style="left:100%;" class="img img1" src="{$IMG}1-27.png">
        </div>
        <div class="swiper-slide">
        	<img class="img" src="{$IMG}1-18.jpg">
        	<img id="img28" class="img img1" src="{$IMG}1-28.png">
        	<img id="img29" style="top:100%;" class="img img1" src="{$IMG}1-29.png">
        </div>
        <div class="swiper-slide">
        	<img class="img" src="{$IMG}1-19.jpg">
        	<img id="img30" style="opacity: 0;" class="img img1" src="{$IMG}1-30.png">
        </div>
        <div class="swiper-slide">
             {if empty($player['mobile'])}
        	<div id="register"><img class="bg" src="{$IMG}08.png">
        			<img style="position: absolute;left: 10%;width: 80%;top: 53%;" src="{$IMG}yel.png">
        			<div style="position: absolute;top: 60%;height: 40px;left: 10%;width: 80%;background: url('{$IMG}m.png');background-size: 100% 100%;">
        				<input type="text" id="name" value="姓名" onfocus="if(this.value=='姓名') this.value='';" onblur="if(this.value=='') this.value='姓名';">
        			</div>
        			<div style="position: absolute;top: 70%;height: 40px;left: 10%;width: 80%;background: url('{$IMG}m.png');background-size: 100% 100%;">
        				<input type="tel" id="mobile" value="手机" onfocus="if(this.value=='手机') this.value='';" onblur="if(this.value=='') this.value='手机';">
        			</div>
        			<img onclick="$('#rule').show()" style="position: absolute;top: 52.5%;width: 30%;height: 30px;left: 35%;" src="{$IMG}rule.png">
        			<img onclick="checksubmit()" style="position: absolute;top: 85%;width: 30%;left: 35%;" src="{$IMG}attend.png">
        	</div>
		     {/if}
		    <div class="prize">
		    <div id="noprize"><img src="{$IMG}13.jpg"><p id="notips">第{$rank}位</p></div>
		    <div id="prize"><img src="{$prize['thumb']}"></div>
		    </div>
        </div>
    </div>
</div>
<div id="rule" onclick="$(this).hide()" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 100;display: none;"><img src="{$IMG}09.jpg" style="width: 100%;height: 100%;"></div>
<audio style="display: none;" src="{php echo toimage($rule['video'])}" autoplay="autoplay" loop="loop"></audio>
<script>      
	$('#img24').fadeTo(3000,1);

  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    onSlideChangeEnd: function(swiper){
    	var index = swiper.activeIndex;
    	$('#img24').css('opacity',0);
    	$('#img25').css('opacity',0);
    	$('#img26').css('left',0);
		$('#img27').css('left','100%');
		$('#img28').css('top',0);
		$('#img29').css('top','100%');
		$('#img30').css('opacity',0);
    	if(index == 0){
    		$('#img24').fadeTo(3000,1);
    	}else if(index == 1){
    		$('#img25').fadeTo(3000,1);
    	}else if(index == 2){
    		window.setTimeout(function(){
    			$('#img26').animate({left:"100%"},1000,'swing');
    			$('#img27').animate({left:0},1000,'swing');
    		},1500);
    	}else if(index == 3){
    		window.setTimeout(function(){
    			$('#img28').animate({top:"100%"},1000,'swing');
    			$('#img29').animate({top:0},1000,'swing');
    		},1000);
    	}else if(index == 4){
    		$('#img30').fadeTo(3000,1);
    	}
    }
  })        
  function checksubmit(){
	  var name = $.trim($('#name').val());
	  var mobile = $.trim($('#mobile').val());
	  if(name == '' || name == '姓名'){
		  alert('请输入您的真实姓名！');
		  return false;
	  }else if(mobile == '' || mobile == '手机' || mobile.length != 11){
		  alert('请输入正确的手机号码！');
		  return false;
	  }
	  $.ajax({
		  url:'{php echo $this->createMobileUrl("info",array("rid"=>$rid,"pid"=>$player["id"]))}',
		  type:'post',
		  data:{realname:name,mobile:mobile},
		  success:function(data){
			  data = JSON.parse(data);
			  if(data['errcode'] == '1'){//中奖
				  $('#register').hide();
				  $('.prize').show();
				  {if $prize}
				  $('#prize').show();
				  {else}
				  $('#noprize').show();
				  {/if}
			  }else{//出错 
				  swal(data['msg'],'','error');
			  }
		  }
	  });
  }
  </script>
</body>
{template 'share'}
</html>

